<template>
    <el-descriptions :column="1" border class="index">
        <el-descriptions-item label="版本" labelClassName="label">{{ basic.Version }}</el-descriptions-item>
        <el-descriptions-item label="驱动" className="driver">
            <div class="driver-value">
                <div v-html="driver" style="height: 100%;" />
            </div>
        </el-descriptions-item>
        <el-descriptions-item label="是否允许重置">{{ basic.ResetEnable }}</el-descriptions-item>
        <el-descriptions-item label="重置次数">{{ basic.ResetCount }}</el-descriptions-item>
        <el-descriptions-item label="Java版本">{{ basic.JavaVersion }}</el-descriptions-item>
        <el-descriptions-item label="JVM名称">{{ basic.JavaVMName }}</el-descriptions-item>
        <el-descriptions-item label="启动时间">{{ basic.StartTime }}</el-descriptions-item>
        <el-descriptions-item label="classpath路径">
            <div class="class-value">
                <div v-html="classPath" style="height: 100%;" class="flex-display-center" />
            </div>
        </el-descriptions-item>
    </el-descriptions>
</template>
<script setup>
import { useRequest } from "@usehook"

let basic = $ref({
    Drivers: [],
    ResetEnable: false,
    ResetCount: 0,
    JavaVersion: "",
    JavaVMName: "",
    StartTime: "",
    JavaClassPath: ""
})

const driver = $computed(() => {
    return basic.Drivers.join("<br>")
})

const classPath = $computed(() => {
    return basic.JavaClassPath.split(";").join("<br>")
})

onMounted(() => {
    useRequest({ url: "/dataSource/druid/basic.json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            basic = resp.Content
        }
    })
})

</script>
<style scoped>
:deep(.label) {
    width: 250px;
}

:deep(th) {
    text-align: right !important;
}

:deep(.driver-value) {
    width: 100%;
    overflow-y: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

:deep(.class-value) {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.index.el-descriptions,
:deep(.el-descriptions__body),
:deep(.el-descriptions__table) {
    height: 100% !important;
}

:deep(.driver) {
    height: 0;
}
</style>